<template>
  <div class="slide-demo">
    <h2>多种过渡效果</h2>

    <div class="controls">
      <button @click="currentTransition = 'slide-down'">下滑效果</button>
      <button @click="currentTransition = 'slide-up'">上滑效果</button>
      <button @click="currentTransition = 'scale'">缩放效果</button>
      <button @click="currentTransition = 'bounce'">弹跳效果</button>
    </div>

    <button @click="show = !show" class="toggle-btn">
      {{ show ? '隐藏' : '显示' }}
    </button>

    <Transition :name="currentTransition">
      <div v-if="show" class="demo-box">
        <h3>{{ getTransitionName() }}</h3>
        <p>当前使用的过渡效果</p>
      </div>
    </Transition>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const show = ref(true)
const currentTransition = ref('slide-down')

const getTransitionName = () => {
  const names = {
    'slide-down': '下滑效果',
    'slide-up': '上滑效果',
    scale: '缩放效果',
    bounce: '弹跳效果',
  }
  return names[currentTransition.value]
}
</script>
<style scoped>
.slide-demo {
  padding: 20px;
  text-align: center;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.controls button:hover {
  background: #27ae60;
}

.toggle-btn {
  padding: 12px 24px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 20px;
}

.demo-box {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  color: white;
  padding: 30px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 350px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 下滑效果 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
}

.slide-down-enter-from {
  opacity: 0;
  transform: translateY(-50px);
}

.slide-down-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

/* 上滑效果 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(50px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}

/* 缩放效果 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.5);
}

/* 弹跳效果 */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-out 0.5s;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0);
  }
}
</style>
